<script  setup>
import { ref, useAttrs,onMounted } from 'vue';

// 声明属性：
const props = defineProps(["value", "isborder"])

// 声明事件
const emit = defineEmits(['click']);

const attrs = useAttrs();

console.log("attrs", attrs);

const inputvalue = ref(props.value);

const clickHandle = () => {
    // 触发事件
    emit('click', inputvalue.value);
}

const fn03 = () => {
    console.log("fn01");
}

const inputRef = ref();

// const inputObj = function(){
//     console.log("inputObj函数：inputRef.value",inputRef.value);
//     const keys = Object.keys(inputRef.value);
//     // console.log("keys", keys);
//     const obj = {};
//     keys.forEach(item=>{
//         obj[item] = inputRef.value[item];
//     })
//     console.log("obj",obj);
//     return obj;
// }

defineExpose({
    fn01: () => {
        console.log("fn01");
    },
    fn02: () => {
        console.log("fn02");
    },
    blur:function() {
        inputRef.value.blur();
    },
    clear:function(){
        inputRef.value.clear();
    }
});

onMounted(()=>{
    // console.log("inputRef.value",inputRef.value);
    // const keys = Object.keys(inputRef.value);
    // console.log("keys", keys);
    // inputObj();
    // console.log("onMounted");
})

</script>

<template>
    <div class="my-button-box" :style="{ border: (props.isborder ? 1 : 0) + 'px solid black' }">
        <el-input ref="inputRef" v-bind="attrs" v-model="inputvalue">
            <template #prefix>
               <slot name="prefix"></slot> 
            </template>
        </el-input>
        <slot name="middle">ddd</slot>
        <el-button v-bind="attrs" @click="clickHandle">搜索</el-button>
    </div>
</template>

<style lang="css" scoped>
.my-button-box {
    display: flex;
    width: 300px;
}
</style>
